<template>
	<view class="page_body">

		<!-- 导航栏 -->
		<navBar bgColor="#FFF">
			<image :slot="'left'"
				@click="navToBack"
				:src="xcxImgUrl && xcxImgUrl+'fanhui.svg'"
				style="width: 36rpx;height: 36rpx;"></image>
			<text :slot="'content'">全部订单</text>
		</navBar>
		<!-- 搜索栏 -->
		<view style="background-color: #FFF;">
			<search @searchBlur='searchBlur'
				:isLinks='false'
				@nativeInput="nativeInput"
				bgColor="#F5F5F5">
			</search>
		</view>

		<!-- 选项卡 -->
		<u-tabs :current="current"
			lineColor='#EC4141'
			:activeStyle="{
		        color: '#EC4141',
				fontSize:'28rpx'
		}"
			:inactiveStyle="{
			color: '#333',
			fontSize:'28rpx'
		}"
			lineHeight='5'
			:list="list1"
			@click='selectTab'></u-tabs>

		<view class="mian_allOrder ">
			<scroll-view scroll-y
				@scrolltolower="scrolltolower"
				:style="{'height': 'calc(100vh  - ' + demoTopHieght +')'}"
				class="mian_allOrder_list pd10">
				<!-- 一条订单记录 -->
				<view v-if="orderList.length > 0">	
				<view v-for="(item,index) in orderList"
					:key="index"
					@click="toDetails(item)"
					class="mian_allOrder_list_item mb10">
					<view class="list_item_top pd_lr10">
						<view class="list_item_top_left">
							下单时间：{{Utils.DateFormateArr(item.createTime)}}
						</view>

						<view v-if="[1,3].includes(item.status) && [1].includes(item.payStatus) "
							class="list_item_top_right">
							待付款
						</view>
						<view v-if="[1].includes(item.status) && [3].includes(item.payStatus) "
							class="list_item_top_right">
							待审核
						</view>
						<view
							v-if="([3].includes(item.status) && [0,3].includes(current) && [3].includes(item.payStatus))  "
							class="list_item_top_right">
							待发货
						</view>
						<view v-if="[4].includes(item.status) "
							class="list_item_top_right">
							待收货
						</view>
						<view v-if="[5].includes(item.status) "
							class="list_item_top_right">
							已完成
						</view>
						<view v-if="[6].includes(item.status) "
							class="list_item_top_right">
							已作废
						</view>
						<view v-if="[7].includes(item.status) "
							class="list_item_top_right">
							已关闭
						</view>
						<view v-if="[2].includes(item.status) "
							class="list_item_top_right">
							待确认
						</view>
					</view>
					<!-- 商品信息 -->
					<view v-for="(it,inx) in item.commodityInfo"
						:key="inx"
						class="list_item_conter pd10">
						<view class="list_item_conter_top">
							<view class="list_item_conter_top_img" v-if="updateNoneImg">
								<image
									:src=" it.spuInfo && it.spuInfo.picture ? uploadImgUrl + it.spuInfo.picture : computedMorentu">
								</image>
							</view>
							<view class="list_item_conter_top_text ml5">
								<view class="list_item_conter_top_text_top texttowShow">
									{{it.spuInfo && it.spuInfo.name ? it.spuInfo.name : ''}}
								</view>
								<template v-if="item.type == 1">
									<view v-for="(itCd,inxCd) in it.children"
										:key="inxCd"
										class="list_item_conter_top_text_bom ">
										<view class="list_item_conter_top_text_bom_item mt10">
											<text class="list_item_conter_top_text_bom_item_l">
												{{
												itCd.skuInfo &&
												itCd.skuInfo.unitInfo && 
												itCd.skuInfo.unitInfo.name &&
												itCd.skuInfo.specsOptionInfo && 
												itCd.skuInfo.specsOptionInfo.length ? 
												itCd.skuInfo.specsOptionInfo.map(it=>it.optionName).join(' ') +
												'/' +
												itCd.skuInfo.unitInfo.name :
												itCd.skuInfo.unitInfo.name
												
											}}
											</text>
											<text class="list_item_conter_top_text_bom_item_r">
												￥{{itCd.price ? Utils.formatToFixed(itCd.price,'price') : 0}}X{{itCd.qty ? itCd.qty : 0}}
											</text>
										</view>
									</view>
								</template>
								<template v-if="item.type == 2">
									<view class="list_item_conter_top_text_bom ">
										<view class="list_item_conter_top_text_bom_item mt10">
											<text class="list_item_conter_top_text_bom_item_l">
												{{
												it.skuInfo &&
												it.skuInfo.unitInfo && 
												it.skuInfo.unitInfo.name &&
												it.skuInfo.specsOptionInfo && 
												it.skuInfo.specsOptionInfo.length ? 
												it.skuInfo.specsOptionInfo.map(it=>it.optionName).join(' ') +
												'/' +
												it.skuInfo.unitInfo.name :
												it.skuInfo.unitInfo.name
												
											}}
											</text>
											<text class="list_item_conter_top_text_bom_item_r">
												￥{{it.price ? Utils.formatToFixed(it.price,'price') : 0}}X{{it.qty ? it.qty : 0}}
											</text>
										</view>
										<!-- 满减 -->
										<view v-if="item.type == 2 && item.activityType == 2"
											class="biaoqian mt10">
											优惠:{{it.preferential ? Utils.formatToFixed(it.preferential,'money') : 0}}元
										</view>
									</view>
								</template>
							</view>
						</view>
						<!-- 活动赠品信息 //订单类型[1：普通订单 2：促销订单] -->
						<template v-if="item.type == 2 && item.activityType == 1 && it.children &&  it.children.length">
							<view v-for="(itc,inxc) in it.children"
								class="list_item_conter_bom mt10">
								<view class="list_item_conter_top_img" v-if="updateNoneImg">
									<image class="zenpin"
										:src="xcxImgUrl && xcxImgUrl+'page_public/static/zengpin.svg'"></image>
									<image
										:src=" itc.spuInfo && itc.spuInfo.picture ? uploadImgUrl + itc.spuInfo.picture : computedMorentu">
									</image>
								</view>
								<view class="list_item_conter_top_text ml5">
									<view class="list_item_conter_top_text_top texttowShow">
										{{itc.spuInfo && itc.spuInfo.name ? itc.spuInfo.name : 0}}
									</view>
									<view class="list_item_conter_top_text_bom ">
										<view class="list_item_conter_top_text_bom_item mt10">
											<text class="list_item_conter_top_text_bom_item_l">
												{{
													itc.skuInfo &&
													itc.skuInfo.unitInfo && 
													itc.skuInfo.unitInfo.name &&
													itc.skuInfo.specsOptionInfo && 
													itc.skuInfo.specsOptionInfo.length ? 
													itc.skuInfo.specsOptionInfo.map(it=>it.optionName).join(' ') +
													'/' +
													itc.skuInfo.unitInfo.name :
													itc.skuInfo.unitInfo.name
													
												}}
											</text>
											<text
												class="list_item_conter_top_text_bom_item_r">X{{itc.qty ? itc.qty : 0}}</text>
										</view>
									</view>
								</view>
							</view>
						</template>
					</view>
					<view class="list_item_bom pd_lr10">
						<view class="">
							共{{item.qty ? item.qty : 0}}件商品
						</view>
						<view v-if="item.type == 2 && item.activityType == 2"
							class="">
							合计：￥{{item.money ? Utils.formatToFixed(item.money-item.preferential,'money') : 0}}
						</view>
						<view v-else
							class="">
							合计：￥{{item.money ? Utils.formatToFixed(item.money,'money') : 0}}
						</view>
					</view>
					<view class="list_item_btn pd10">
						<view v-if="item.payStatus == 1 && (item.status == 3 || item.status == 1) && [0,1].includes(current)  "
							@click.stop="closeOrder(item)"
							class="list_item_btn_item ml5">
							关闭订单
						</view>

						<view @click.stop="lijiZhifu(item)"
							v-if="item.payStatus == 1 && (item.status == 3 || item.status == 1) && [0,1].includes(current)  "
							class="list_item_btn_item list_item_btn_item_active ml5">
							立即支付
						</view>
						<view @click.stop="chakanwuliu(item)"
							v-if="item.status == 4"
							class="list_item_btn_item ml5">
							查看物流
						</view>
						<view @click.stop="sureShouhuo(item)"
							v-if="item.status == 4"
							class="list_item_btn_item list_item_btn_item_active ml5">
							确认收货
						</view>
						<view @click.stop="delOrder(item)"
							v-if="item.status == 5 || item.status == 7 || item.status == 6"
							class="list_item_btn_item ml5">
							删除订单
						</view>
					</view>
				</view>
				</view>
  <view  v-else style="display: flex;align-items: center;justify-content: center;flex-direction: column;
  height: 357px">
  			<image src="/static/newpic/noOrder.svg" mode=""></image>
  			<view>暂无订单，快去下单吧！</view>
			<view class="goShopping" @click="goShopping">
				去购物
			</view>
  		</view>
			</scroll-view>

			<!-- 模态框确认 -->
			<u-modal :show="modalShow"
				:title="modalInfo.title"
				showConfirmButton
				showCancelButton
				@confirm='modalConfirm'
				@cancel='modalShow = false'
				:content='modalInfo.content'>

			</u-modal>

		</view>
	</view>
</template>

<script>
	import {
		mapGetters
	} from 'vuex'
	import {
		listMallOrderPageInfo,
		updateMallOrderStatus,
		deleteMallOrderByOrderId
	} from '@/api/global.js'
	import {
		uploadImgUrl
	} from '@/utils/request.js'
	export default {
		computed: {
			...mapGetters(['demoTopHieght']),
			//返回默认图
			computedMorentu() {
				return this.$store.state.morentu
			},
			//返回有图无图控制
			updateNoneImg() {
				return this.$store.state.configSetting.noneImge == 1 ? false : true
			},
		},
		data() {
			return {
				timer:null,
				uploadImgUrl,
				list1: [{
					name: '全部',
				}, {
					name: '待付款',
				}, {
					name: '待审核'
				}, {
					name: '待发货'
				}, {
					name: '待收货'
				}, {
					name: '已完成'
				}],
				pageData: {
					currentPage: 1,
					pageSize: 10
				},
				lastPage: 0,
				orderList: [],
				searchParams: {
					status: 0, //状态[1：待审核 2：修改待确认 3：待发货 4：待收货确认 5：已完成 6：已作废 7：关闭] 待审核：staus 1 paystatus 3; 待发货：staus 3 paystatus 3
					// 待付款 payStatus = 1 并且 (status = 1 或 status = 3)
					payStatus: 0, // 支付状态[1：待付款 2：部分付款 3：全部付款]'
					sort: 2,
					apiSearch: '',
					mark: ``
				},
				current: 0, //当前选项下标
				modalShow: false, //模态框
				modalInfo: { //模态框提示对象内容
					title: '温馨提示',
					content: ''
				},
				modalType: 0, //区分模态确认后点击事件
				orderId: '', //订单id
				prevType: ``,
				isLoad: false,
			};
		},
		onLoad(options) {
			//接受状态
			console.log(options);
			this.searchParams.status = options?.statusInfo ? JSON.parse(options?.statusInfo)?.status : 0
			this.searchParams.payStatus = options?.statusInfo ? JSON.parse(options?.statusInfo)?.payStatus : 0
			this.isLoad = true;
			this.prevType = options.type || ``;
			//根据状态判断当前对应的tab选项卡
			if (this.searchParams.payStatus == 1 && this.searchParams.status == 3) {
				this.current = 1;
				this.searchParams.mark = 1;
			} else if (this.searchParams.status == 0) {
				this.current = 0
			} else if (this.searchParams.status == 1) {
				this.current = 2;
				this.searchParams.mark = 2;
			} else if (this.searchParams.status == 3) {
				this.current = 3;
				this.searchParams.mark = 3;
			} else if (this.searchParams.status == 4) {
				this.current = 4;
				this.searchParams.mark = 4;
			}
			console.log(this.isLoad, 79)
			this.pageData.currentPage = 1;
			this.orderList = [];
			this.getList()
		},
		onShow() {
			this.$nextTick(() => {
				// 获取状态栏的高度
				this.statusBarHeight = this.$store.state.statusBarHeight * 2 + 'rpx'
				// 计算站位的高度
				this.height = (this.$store.state.navBarHeight) * 2 + 'rpx'
				//获取高度
				this.Utils.getDemoTopHeight('mian_allOrder_list')
			})
			console.log(this.isLoad, 90)
			if (this.isLoad) {
				return;
			}
			this.pageData.currentPage = 1;
			this.orderList = [];
			this.getList()
		},
		methods: {
			goShopping(){
			uni.switchTab({
				url:'/pages/classitys/classitys'
			})	
			},
			//模态确定
			async modalConfirm() {
				if (this.modalType == 1) { //关闭订单操作
					// 标记[1.订单确认  2.确认收货  3.审核通过  4.作废  5.订单修改  6.关闭]
					let res = await updateMallOrderStatus({
						tag: 6,
						orderId: this.orderId
					})
					if (res.code == 2000) {
						this.Utils.toast(`关闭成功`)
						this.modalShow = false
						this.pageData.currentPage = 1
						this.orderList = []
						this.getList()
					} else {
						this.Utils.toast(`${res.msg}`)
					}
				}
				if (this.modalType == 2) { //确认收货操作
					//标记[1.订单确认  2.确认收货  3.审核通过  4.作废  5.订单修改  6.关闭]
					let res = await updateMallOrderStatus({
						tag: 2,
						orderId: this.orderId
					})
					if (res.code == 2000) {
						this.Utils.toast(`收货成功`)
						this.modalShow = false
						this.pageData.currentPage = 1
						this.orderList = []
						this.getList()
					} else {
						this.Utils.toast(`${res.msg}`)
					}
				}
				if (this.modalType == 3) { //删除订单操作
					let res = await deleteMallOrderByOrderId({
						orderId: this.orderId
					})
					if (res.code == 2000) {
						this.Utils.toast(`删除成功`)
						this.modalShow = false
						this.pageData.currentPage = 1
						this.orderList = []
						this.getList()
					} else {
						this.Utils.toast(`${res.msg}`)
					}
				}
			},
			//删除订单
			delOrder(item) {
				this.modalShow = true
				this.modalInfo.content = '是否确定删除当前订单？？？'
				this.orderId = item?.orderId || ''
				this.modalType = 3 //删除订单
			},
			//确认收货
			sureShouhuo(item) {
				this.modalShow = true
				this.modalInfo.content = '是否确定已经签收该订单？？？'
				this.orderId = item?.orderId || ''
				this.modalType = 2 //确认收货操作

			},
			//立即支付
			lijiZhifu(item) {
				//2.普通 1.促销
				let type = item.type == 1 ? 2 : 1
				uni.navigateTo({
					url: `/page_public/surePay?type=${type}&yinfuMoney=${item.money - item.preferential}&time=${this.Utils.DateFormateArr(item.createTime)}&orderId=${item.orderId}`
				})
			},
			//查看物流
			chakanwuliu(item) {
				uni.navigateTo({
					url: `/page_public/logisticsDetails?id=${item.orderId}&route=all`
				})
			},
			//关闭订单
			closeOrder(item) {
				this.modalShow = true
				this.modalInfo.content = '是否关闭当前订单？？？'
				this.orderId = item?.orderId || ''
				this.modalType = 1 //关闭订单操作

			},
			//输入框点击搜素
			searchBlur(val) {
				console.log(val);
				this.searchParams.apiSearch = val
				this.pageData.currentPage = 1
				this.orderList = []
				this.getList()
			},
			nativeInput(e){
				this.searchParams.apiSearch = e;
				clearTimeout(this.timer);
				this.timer = setTimeout(() => {
					this.getList();
				},1000)
				
			},
			//返回上个页面
			navToBack() {
				uni.switchTab({
					url: '/pages/myde/myde'
				})
			},
			//去详情
			toDetails(item) {
				//保存商品信息
				this.$store.commit('updateCommonityItem', item)
				uni.navigateTo({
					url: `/page_public/orderDetails?routeType=allOrder&current=${this.current}`
				})
			},
			//切换选项卡
			selectTab(item) {
				this.current = item.index
				console.log(item);
				if (item.index == 0) {
					this.searchParams.status = 0
					this.searchParams.payStatus = 0;
					this.searchParams.mark = ``;
				} else if (item.index == 1) {
					// this.searchParams.status = 3
					// this.searchParams.payStatus = 1
					this.searchParams.status = ``;
					this.searchParams.payStatus = ``;
					this.searchParams.mark = item.index;
				} else if (item.index == 2) {
					// this.searchParams.status = 1
					// this.searchParams.payStatus = 3
					this.searchParams.status = ``;
					this.searchParams.payStatus = ``;
					this.searchParams.mark = item.index;
				} else if (item.index == 3) {
					// this.searchParams.status = 3
					// this.searchParams.payStatus = 0
					this.searchParams.status = ``;
					this.searchParams.payStatus = ``;
					this.searchParams.mark = item.index;
				} else if (item.index == 4) {
					// this.searchParams.status = 4
					// this.searchParams.payStatus = 0
					this.searchParams.status = ``;
					this.searchParams.payStatus = ``;
					this.searchParams.mark = item.index;
				} else if (item.index == 5) {
					this.searchParams.status = 5
					this.searchParams.payStatus = 0;
					this.searchParams.mark = ``;
				}
				this.pageData.currentPage = 1
				this.orderList = []
				this.getList()
			},
			//下拉加载
			scrolltolower() {
				this.pageData.currentPage++
				if (this.pageData.currentPage > this.lastPage) {
					return
				} else {
					this.getList()
				}
			},
			//获取列表
			async getList() {
				uni.showLoading()
				let res = await listMallOrderPageInfo({
					...this.searchParams,
					...this.pageData
				})
				if (res.code == 2000) {
					uni.hideLoading()
					if (this.pageData.currentPage == 1) {
						this.orderList = (res?.data?.info?.list || [])
					} else {
						this.orderList = this.orderList.concat(res?.data?.info?.list || [])
					}
					this.lastPage = res?.data?.info?.lastPage
					console.log(this.orderList,'订单列表');
				}
			}
		}
	}
</script>

<style lang="scss"
	scoped>
	/deep/.u-modal__button-group__wrapper--confirm.u-modal__button-group__wrapper--confirm  {
		background-color: #ec4141;
		
		.u-modal__button-group__wrapper__text {
			color: #FFF !important;
		}
	}
	.goShopping {
		    width: 80px;
		    height: 30px;
		    border-radius: 30px;
		    text-align: center;
		    line-height: 30px;
		    margin-top: 18px;
		    border: 1px solid #e8e8e8;
	}
	/deep/.u-tabs__wrapper__nav {
		width: 100%;
		background-color: #FFF;
	}

	/deep/.u-tabs__wrapper__nav__item {
		// flex: 1;
		background-color: #FFF;
		width: 120rpx !important;
		text-align: center;
	}

	/deep/.u-tabs__wrapper__nav__line {
		// transform: translate(35.5px)!important;
		width: 160rpx !important;
		left: -8.5%;
	}

	.mian_allOrder {
		width: 100%;
		box-sizing: border-box;
        // background-color: #FFF;
		.mian_allOrder_list {
			box-sizing: border-box;

			.mian_allOrder_list_item {
				background-color: #FFF;
				width: 100%;
				border-radius: $border_radius_10;

				.list_item_top {
					height: 88rpx;
					border-bottom: 1px solid #f3f3f3;
					display: flex;
					align-items: center;
					justify-content: space-between;
					color: $text_color_333;

					.list_item_top_left {
						font-size: $font_size_14;
					}

					.list_item_top_right {
						font-size: $font_size_14;
					}
				}

				.list_item_conter {
					border-bottom: 1px solid #f3f3f3;

					.list_item_conter_top,
					.list_item_conter_bom {
						display: flex;

						.list_item_conter_top_img {
							position: relative;
							border-radius: $border_radius_4;
							width: 160rpx;
							height: 160rpx;

							.zenpin {
								position: absolute;
								left: 0;
								top: 0;
								z-index: 999;
								width: 80rpx;
								height: 32rpx;
							}

							image {
								width: 100%;
								height: 100%;
								border-radius: 12rpx
							}
						}

						.list_item_conter_top_text {
							flex: 1;

							.list_item_conter_top_text_top {
								font-size: $font_size_14;
								color: $text_color_333;
							}

							.list_item_conter_top_text_bom {
								.list_item_conter_top_text_bom_item {
									font-size: $font_size_14;
									display: flex;
									justify-content: space-between;

									.list_item_conter_top_text_bom_item_l {
										color: $text_color_808080;
									}

									.list_item_conter_top_text_bom_item_r {
										color: $text_color_333;
									}
								}

								.biaoqian {
									font-size: $font_size_12;
									color: $text_color_ec4141;
									padding: 4rpx;
									background-color: rgba(255, 227, 227, 1);
									width: 150rpx;
									max-width: 300rpx;
									border-radius: $border_radius_4;
									text-align: center;
									float: right;
								}
							}
						}
					}

					.list_item_conter_bom {
						margin-left: 100rpx;
					}
				}

				.list_item_bom {
					display: flex;
					height: 80rpx;
					align-items: center;
					justify-content: space-between;
					color: $text_color_333;
					font-size: $font_size_14;
				}

				.list_item_btn {
					display: flex;
					justify-content: flex-end;

					.list_item_btn_item {
						font-size: $font_size_14;
						color: $text_color_333;
						border: 1px solid rgba(230, 230, 230, 1);
						width: 160rpx;
						height: 60rpx;
						line-height: 60rpx;
						text-align: center;
						border-radius: $border_radius_4;

					}

					.list_item_btn_item_active {
						color: $text_color_ec4141;
						border: 1px solid $text_color_ec4141;
					}
				}
			}
		}
	}
</style>